@import '../../styles/colors.scss';

.header {
    display: flex;
    background: $slate;
    color: white;
    align-items: center;
    padding: 10px 0;
    font-family: 'Heebo', sans-serif;

    &__brand {
        color: $shine;
        display: flex;
        align-items: center;
        text-decoration: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    &__welcome {
        position: absolute;
        transform-origin: left;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        transition: transform 1s ease 1s, opacity 1s ease;
    }

    &__title {
        position: absolute;
        transition: transform 500ms ease 750ms;
        display: flex;
        flex-wrap: nowrap;
        flex-grow: 1;
        align-items: center;
        white-space: nowrap;
    }

    h1 {
        position: relative;
        font-size: 22px;
        font-weight: 400;
        margin: 0;
        display: flex;
        align-items: center;
    }

    h2 {
        font-size: 18px;
        color: $sherbert;
        margin: 0;
        margin-left: 10px;
        flex-grow: 1;
        white-space: nowrap;
    }

    &__info {
        margin-left: auto;
        display: flex;
        align-items: center;
    }
    &__version {
        color: $shine;
        margin: 0 15px;
    }
}
